<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/head.css">
    <link rel="stylesheet" href="./css/foot.css">
    <link rel="stylesheet" href="./css/shop.css">
</head>
<body>
    <!-- 头部开始 -->
    <div class="head">
        <div class="wraper top clearfix">
            <a href="#" class="a_left">legochina.cn</a>
            <span class="span_right fr">
                欢迎光临
                <a href="#" class="a1">乐购</a>
                ,请 登录\
                <a href="#" class="a1">登录</a>
            </span>
            <!-- logo区域 -->
            <h1><img src="./imgs/logo.jpg" alt="" class="img_logo"></h1>
            <!-- 搜索栏区域 -->
           <div class="each">
                <form action="#" class="ssk">
                    <input type="text" placeholder="创意文具">
                    <input type="button">
                </form>
                <div class="fr clearfix">
                    <span class="span1 fl">
                        <a href="#">&emsp;购物车</a>
                    </span>
                    <span class="span2 fr">
                        <a href="#">我的订单</a>
                    </span>
                </div>
           </div>
           <!-- 分类区 -->
           <ul class="clearfix">
               <li><a href="#">图书</a></li>
               <li><a href="#">电子书</a></li>
               <li><a href="#">原创文学</a></li>
               <li><a href="#">服装</a></li>
               <li><a href="#">户外运动</a></li>
               <li><a href="#">孕婴童</a></li>
               <li><a href="#">家居</a></li>
               <li><a href="#">创意文具</a></li>
               <li><a href="#">地方特产</a></li>
               <li><a href="#">海外购</a></li>
               <li><a href="#">电器城</a></li>
           </ul>
        </div>
    </div>
    <!-- 头部结束 -->

    <!-- 购物车 -->
    <div class="shop wraper">
        <!-- 头部 -->
        <ul class="shop_ul clearfix">
            <li class="shop_li1">
                <!-- 选中区域 -->
                <div>
                    <input type="checkbox" class="">
                </div>
            </li>
            <li class="shop_li2">全选</li>
            <li class="shop_li3">商品</li>
            <li class="shop_li4">单价</li>
            <li class="shop_li5">数量</li>
            <li class="shop_li6">小计</li>
            <li class="shop_li7">操作</li>
        </ul>
        <!-- 上边框线 -->
        <div class="part_line"></div>

        <!-- 假设第一个店铺 -->
        <div class="cartbox clearfix">
            <div class="div_box clearfix">
                <ul class="order_content clearfix">
                    <li class="shop_li1">
                        <input type="checkbox">
                    </li>
                    <li class="shop_li2">
                        <div class="shop_li2_div">
                            <img src="./imgs/index08_05.jpg" alt="">
                        </div>
                    </li>
                    <li class="shop_li3">
                        <p>从你的全世界路过</p>
                    </li>
                    <li class="shop_li4">
                        <p>¥<span>100</span></p>
                    </li>
                    <li class="shop_li5">
                        <div class="shop_li5_div">
                           <a href="#" class="fl">-</a>
                           <input type="number" class="fl">
                           <a href="#" class="fl">+</a>
                        </div>
                    </li>
                    <li class="shop_li6">
                        <p>¥<span>100</span></p>
                    </li>
                    <li class="shop_li7">
                        <p>
                            <a href="#">移除商品</a>
                        </p>
                    </li>
                </ul>
                <ul class="order_content clearfix">
                    <li class="shop_li1">
                        <input type="checkbox">
                    </li>
                    <li class="shop_li2">
                        <div class="shop_li2_div">
                            <img src="./imgs/index08_05.jpg" alt="">
                        </div>
                    </li>
                    <li class="shop_li3">
                        <p>从你的全世界路过</p>
                    </li>
                    <li class="shop_li4">
                        <p>¥<span>100</span></p>
                    </li>
                    <li class="shop_li5">
                        <div class="shop_li5_div">
                           <a href="#" class="fl">-</a>
                           <input type="number" class="fl">
                           <a href="#" class="fl">+</a>
                        </div>
                    </li>
                    <li class="shop_li6">
                        <p>¥<span>100</span></p>
                    </li>
                    <li class="shop_li7">
                        <p>
                            <a href="#">移除商品</a>
                        </p>
                    </li>
                </ul>
            </div>
            <!-- 底部 -->
            <div class="closing clearfix">
                <div class="closing_left clearfix">
                    <p class="p1">删除选中的商品</p>
                    <p class="p2">
                        <span>已选择 &emsp;  件商品</span>
                        <span>总价: &emsp;</span>
                    </p>
                   
                </div>
                <div class="closing_right">
                    <a href="#">去结算</a>
                </div>
            </div>
        </div>
    </div>
     <!-- 页脚开始 -->
     <div class="footer_">
        <div class="footer">
            <div class="footer_top">
                <span class=" figure">
                    <img src="./imgs/222_11.png" alt="">
                </span>
                <span class=" figure">
                    <img src="./imgs/222_13.png" alt="">
                </span>
                <span class=" figure">
                    <img src="./imgs/222_15.png" alt="">
                </span>
                <span class=" figure">
                    <img src="./imgs/222_17.png" alt="">
                </span>
            </div>
        </div>
        <div class="footer_content">
            <div class="clearfix zn">
                <div class="fingerpost">
                    <h1><a href="#">购物指南</a></h1>
                    <p><a href="#">购物流程</a></p>
                    <p><a href="#">发票制度</a></p>
                    <p><a href="#">账户管理</a></p>
                    <p><a href="#">会员优惠</a></p>
                </div>
                <div  class="fingerpost">
                    <h1><a href="#">购物指南</a></h1>
                    <p><a href="#">购物流程</a></p>
                    <p><a href="#">发票制度</a></p>
                    <p><a href="#">账户管理</a></p>
                    <p><a href="#">会员优惠</a></p>
                </div>
                <div  class="fingerpost">
                    <h1><a href="#">购物指南</a></h1>
                    <p><a href="#">购物流程</a></p>
                    <p><a href="#">发票制度</a></p>
                    <p><a href="#">账户管理</a></p>
                    <p><a href="#">会员优惠</a></p>
                </div>
                <div  class="fingerpost">
                    <h1><a href="#">购物指南</a></h1>
                    <p><a href="#">购物流程</a></p>
                    <p><a href="#">发票制度</a></p>
                    <p><a href="#">账户管理</a></p>
                    <p><a href="#">会员优惠</a></p>
                </div>
                <div  class="fingerpost">
                    <h1><a href="#">购物指南</a></h1>
                    <p><a href="#">购物流程</a></p>
                    <p><a href="#">发票制度</a></p>
                    <p><a href="#">账户管理</a></p>
                </div>
                <img src="./imgs/logo_00.png" alt="" class="legou">
            </div>
            <div class="footer_bottom clearfix">
                <p>公司简介</p>
                <p>|</p>
                <p>Investor Relations</p>
                <p>|</p>
                <p>网站联盟</p>
                <p>|</p>
                <p>乐购招商</p>
                <p>|</p>
                <p>机构销售</p>
                <p>|</p>
                <p>手机乐购</p>
                <p>|</p>
                <p>官方Blog</p>
                <p>|</p>
                <p>热词搜索</p>
            </div>
            <p class="wenzi">Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>
        </div>
    </div>
    <!-- 页脚结束 -->
</body>

</html>